<template>
  <div>
    <MyHead title="会员购" :back="true"></MyHead>
    <van-search shape="round" v-model="value" placeholder="搜一搜" input-align="center" @click="gotowhere({name:'search'})" />
    <ul class="nav">
        <li v-for="(l,i) in nav" :key="i">
            <img :src="l.imageUrl" alt="">
            <p>{{l.name}}</p>
        </li>
    </ul>
    <div class="containar">
      <p>
        <img
          src="https://i0.hdslb.com/bfs/activity-plat/static/20210225/6811c10b7985b8b3c24ebd849bbe0223/XqthbuesLS.png"
          alt=""
        />
        免费音频试听
      </p>
      <p>
        <img
          src="https://i0.hdslb.com/bfs/activity-plat/static/20210225/6811c10b7985b8b3c24ebd849bbe0223/XqthbuesLS.png"
          alt=""
        />
        免费漫画试读
      </p>
    </div>
    <LoadMore :refresh="refreshData" :loaddata="getMoreData">
    <Blist :item="item"></Blist>
   </LoadMore>

    <!-- <ul class="item">
        <li class="item-li" v-for="(l,i) in item" :key="i">
        <img :src="l.firstImgUrl" alt="">
        <p>{{l.title}}</p>
        <span>¥{{l.price[0]}}</span>
        </li>
    </ul> -->
  </div>
   
</template>

<script>
import Blist from "../../components/Blist.vue";
import LoadMore from "@/components/LoadMore.vue";
export default {
    data() {
        return {
            nav: [],
            item: "",
            value: "",
            pageNum: 1,
        };
    },
    methods: {
        async getbzNav() {
            let res = await this.$ajax.getNav({
                channel: 3,
                sourceType: 3,
            });
            this.nav = res.data.vo.tabs;
        },
        async getbzItem() {
            let res = await this.$ajax.getItem({
                feedType: 0
            });
            this.item = res.data.vo.list;
        },
        //加载第二页数据
        async getMoreData(dataEnd,loadEnd){
          if(this.pageNum > 4){
                dataEnd()
            }else{
                let res = await this.$ajax.getItem({
                    pageNum: this.pageNum++,
                    feedType: 0
                    
                });
                this.$nextTick(() => {
                    this.item = this.item.concat(res.data.vo.list);  // 拼接 第二页数据 
                    loadEnd()
                });
            }
        },
        //刷新数据
        async refreshData(callback) {
          let res = await this.$ajax.getItem({
            pageNum: 1,
          });
            this.$nextTick(() => {
                this.item = res.data.vo.list;
                callback()
            });
        },
        async getswj1() {
            let res = await this.$ajax.getSwj();
            console.log(res);
        },
          async getwsk1() {
            let res = await this.$ajax.getWsk({
              menuId: 250,
              pageNum: 1,
              sort: '',
              proSeries: '',
              proSize: '',
              proColor: '',
              proDesign: '',
            });
            console.log(res);
        },
         async getlxq1() {
            let res = await this.$ajax.getLxq({
              menuId: 258,
              pageNum: 1,
              sort: '',
              proSeries: '',
              proSize: '',
              proColor: '',
              proDesign: '',
            });
            console.log(res);
        },

    },
    mounted() {
        this.getbzNav(),
        this.getbzItem();
        this.getswj1()
        this.getwsk1()
        this.getlxq1()
    },
    components: { Blist, LoadMore }
};
</script>

<style lang="scss" scoped>
.nav{

    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
    li{
        width: 23%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-items: center;
    }

}
.containar {
    display: flex;
    margin-top: 10px;
    background-color: #fff;
    p {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #e7e7e7;
      border-radius: 4px;
      height: 50px;
      line-height: 40px;
      flex-grow: 1;
      text-align: center;
      font-size: 14px;
      color: #999;
      margin: 0px 10px;
      img {
        display: block;
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
    }
   
}
// .item{
//         width: 100%;
//         height: 100%;
//         display: flex;
//         align-items: center;
//         justify-content: space-around;
//         flex-wrap: wrap;
//         .item-li{
            
//             width: 48%;
//             height: 280px;
//             img{
//                 display: block;
//                 width: 180px;
//                 height: 180px;
//             }
//             p{
//                 color: #212121;
//                 text-align: center;
//                 text-overflow: -o-ellipsis-lastline;
//                 overflow: hidden;				//溢出内容隐藏
//                 text-overflow: ellipsis;		//文本溢出部分用省略号表示
//                 display: -webkit-box;			//特别显示模式
//                 -webkit-line-clamp: 2;			//行数
//                 line-clamp: 2;					
//                 -webkit-box-orient: vertical;	//盒子中内容竖直排列
//                 width: 160px;
//                 padding: 0px 5px;
//             }
//             span{
//                 padding-top: 5px;
//                 padding-left: 15px;
//                 color: #ff5687;
//                 font-size: 18px;
//             }
//         }
//     }
</style>